<template>
    <!-- 导航栏 -->
    <van-nav-bar title="设置昵称" left-text="取消" right-text="完成" @click-right="onUpName" @click-left="$emit('close')">
    </van-nav-bar>
    <!-- 输入框 -->
    <div class="field-wrap">
        <van-field show-word-limit autosize v-model.trim="localName" type="textarea" maxlength="12"
            placeholder="请输入昵称" />
    </div>
</template>

<script>
import { ref } from 'vue'
import { upUserProfileAPI } from '@/api/user'
import { Toast } from 'vant'
export default {
  emits: ['close', 'upName'],
  name: 'editName',
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup (props, content) {
    const localName = ref(props.name)
    const onUpName = async () => {
      Toast.loading({
        duration: 0,
        forbidClick: true,
        message: '修改中...'
      })
      try {
        if (localName.value.length) {
          Toast('昵称不可为空')
          console.log('昵称不可为空')
        }
        await upUserProfileAPI({
          name: localName.value
        })
        // 修改父组件本地数据
        content.emit('upName', localName)
        // 关闭弹层
        content.emit('close')
        // 显示成功
        Toast.success('修改成功')
      } catch (err) {
        console.log(err)
      }
    }
    return {
      localName,
      onUpName
    }
  }
}
</script>

<style scoped lang="less">
.field-wrap {
    padding: 20px;
}
</style>
